<template>
	<view class="content">
		<view class="newbg">
			<image class="js" src="../../static/pages_my/dddd.png" mode="aspectFill"></image>
			<view class="input-box" style="margin: 600rpx auto 0;">
				<input type="text" placeholder="请输入姓名" v-model="name" placeholder-class="ppp">
			</view>
			<view class="input-box" style="margin: 30rpx auto;">
				<input type="tel" placeholder="请输入手机号" v-model="mobile" placeholder-class="ppp">
			</view>
			<view class="input-box" style="margin: 30rpx auto;">
				<input type="text" placeholder="请输入身份证号" v-model="idcard" placeholder-class="ppp">
			</view>
			<view class="input-box flex" @click="cityshow">
				<text>代理地区</text>
				<view class="flex" style="align-items: center;">
					<text v-if="nans === 0">{{city || '选择城市'}}</text>
					<text v-else>{{district || '选择城市'}}</text>
					<u-icon name='arrow-right' color='#00CE9B'></u-icon>
				</view>
			</view>
			<!-- <view class="input-box flex" style="margin: 30rpx auto;">
				<text>代理等级</text>
				<view class="flex">
					<view class="Nan flex">
						<view v-if="nans==1" @click="nans=0,mytype=2,city='',province='',district=''" class="circless">
						</view>
						<image v-if="nans==0" src="/static/pages_my/sex.png" mode=""></image>
						<text>一级代理</text>
					</view>
					<view class="Nan flex u-m-l-50">
						<view v-if="nans==0" @click="nans=1,mytype=1,city='',province='',district=''" class="circless">
						</view>
						<image v-if="nans==1" src="/static/pages_my/sex.png" mode=""></image>
						<text>二级代理</text>
					</view>
				</view>
			</view> -->

		</view>
		<view class="flex-cneter sub u-m-t-50" v-if="state === ''" @click="apply">
			<image src="../../static/pages_my/submit.png" mode=""></image>
		</view>
		<view class="flex-cneter sub u-m-t-50" v-if="state === -1" @click="apply">
			<image src="../../static/pages_my/submit.png" mode=""></image>
		</view>

		<address-picker :show="show" closeOnClickOverlay v-if="citydatas" :mytype='2' :citydata="citydatas"
			@confirm='confirmAddress' @cancel='show=false' @close='addressShow = false'></address-picker>
		<address-picker :show="show1" closeOnClickOverlay v-if="citydatas" :mytype='1' :citydata="citydatas"
			@confirm='confirmAddress' @cancel='show1=false' @close='addressShow = false'></address-picker>

	</view>
</template>

<script>
	import cityData from '../../common/city.js'
	export default {
		data() {
			return {
				citydatas: uni.getStorageSync('citydata1') || [],
				mobile: "",
				nans: 0,
				idcard: '',
				city: '',

				name: '',
				province: '',
				district: '',
				cityList: [],
				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				show: false,
				show1: false,
				state: '',
				mytype: 2
			};
		},
		onLoad() {
			this.initCityData()
			this.getinfo()
		},
		watch: {
			mytype(value, oldvalue) {
				console.log('新值为' + value, '旧值为' + oldvalue);
			}
		},
		methods: {
			cityshow() {
				if (this.nans === 0) {
					this.show = true
				} else {
					this.show1 = true
				}
			},
			confirmAddress(e) {
				console.log(e);
				this.province = e.value[0]
				if (this.nans === 0) {
					this.city = e.value[1]
					this.district = ''
				} else {
					this.city = e.value[1]
					this.district = e.value[2]
				}
				this.show = false;
				this.show1 = false;
			},
			// 获取代理个人信息
			getinfo() {
				this.$api.post('/applyagent', {}).then(res => {
					if (res.code == 1) {
						if (res.data.state == -1) {
							uni.$u.toast('审核未通过，请重新修改信息');
						} else if (res.data.state == 1) {
							uni.$u.toast('审核通过');

						} else if (res.data.state == 0) {
							uni.$u.toast('已提交，请等待审核');
						}
						if (res.data) {
							this.name = res.data.name,
								this.idcard = res.data.card,
								this.id = res.data.id,
								this.user_id = res.data.user_id,
								this.mobile = res.data.mobile,
								this.city = res.data.city
							this.state = res.data.state,
								this.nans = res.data.type,
								this.province = res.data.province,
								this.city = res.data.city,
								this.district = res.data.district
						}


					}
				}).catch((res) => {

				})
			},
			// 申请代理
			apply() {
				if (this.name === '') {
					this.$toast('请输入姓名');
					return
				}
				if (!uni.$u.test.mobile(this.mobile)) {
					this.$toast('请输入正确的手机号');
					return
				}
				if (!uni.$u.test.idCard(this.idcard)) {
					this.$toast('请输入正确的身份证号');
					return
				}
				if (this.province === '') {
					this.$toast('请选择地区');
					return
				}
				if (this.city === '') {
					this.$toast('请选择地区');
					return
				}
				if (this.nans === 1 && this.district === '') {
					this.$toast('请选择区县');
					return
				}


				this.$api.post('/applyagent', {
					types: 'apply',
					name: this.name,
					mobile: this.mobile,
					card: this.idcard,
					province: this.province,
					city: this.city,
					district: this.district || '',
					type: this.nans
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						setTimeout(() => {
							this.$back();
						}, 1000)
					}
				}).catch((res) => {

				})
			},
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);

					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;

					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},

		}
	}
</script>

<style lang="scss">
	page {
		position: relative;
		background-color: #68FFB8;
		padding-bottom: 100rpx;
		height: calc(100vh - var(--window-bottom) - var(--window-top));
		padding-top: var(--status-bar-height);
	}
	.content{
		padding-bottom: 100rpx;
	}

	.newbg {
		width: 90vw;
		margin: 0 auto;
		background-color: #68FFB8;
		box-sizing: border-box;
		position: relative;
		overflow: auto;

		.js {
			width: 90vw;
			height: 100%;
			position: absolute;
			z-index: 1;
		}

		.input-box {
			z-index: 999;
			position: relative;
			margin: 30rpx auto;
			justify-content: space-between;
			width: 80%;
			padding: 30rpx;
			border-radius: 30rpx;
			border: 2rpx solid #00CE9B;
			color: #00CE9B;

			.Nan {
				align-items: center;

				>image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}

				.circless {
					margin-right: 10rpx;
					width: 25rpx;
					height: 25rpx;
					border: 1rpx solid #00CE9B;
					border-radius: 50%;
				}
			}

			.ppp {
				color: #00CE9B;
			}
		}
	}

	.sub {
		image {
			width: 90vw;
			height: 110rpx;
		}

	}
</style>